<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>

      <div class="selectForm">
        <el-form :inline="true" :model="selectForm" class="demo-form-inline" style="float: left">
          <el-form-item label="角色名">
            <el-input v-model="selectForm.roleName" placeholder="角色名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSelectClick(1,pageSize)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="onResetSelect">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button @click="showEditFormDialogAddNew()" style="float: right;margin-bottom: 10px;">
          <i class="el-icon-circle-plus"></i>
          添加角色
        </el-button>
      </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.children" border style="width: 100%">
                  <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                  <el-table-column prop="limitName" label="权限名" header-align="center" ></el-table-column>
                  <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                   @click="openDeleteLimitConfirm(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
            <el-table-column prop="roleName" label="角色名" header-align="center" ></el-table-column>
            <el-table-column prop="created" label="创建时间" header-align="center" ></el-table-column>
            <el-table-column prop="updated" label="修改时间" align="center"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                               @click="showEditFormDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="添加权限" placement="top">
                    <el-button type="warning" icon="el-icon-plus" circle size="mini"
                               @click="addAuthFormDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                               @click="openDeleteConfirm(scope.row)"></el-button>
                  </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 以下是添加角色的弹出表单Dialog -->
        <el-dialog title="添加角色" :visible.sync="dialogFormVisibleAddNew" width="800px" style="text-align: left">
            <div style="width: 90%;">
              <el-form :model="addForm" label-width="140px">
                  <el-form-item label="角色名">
                      <el-input v-model="addForm.roleName" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogFormVisibleAddNew = false">取 消</el-button>
                <el-button type="primary" @click="submitAddNewForm()">确 定</el-button>
            </div>
        </el-dialog>

          <el-dialog title="添加权限" :visible.sync="dialogFormVisibleAddAuth" width="800px" style="text-align: left">
            <div style="width: 90%;">
              <el-form :model="addAuthForm" label-width="300px">
                <el-form-item label="权限名">
                  <el-select v-model="addAuthForm.limitId" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.limitName"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button @click="dialogFormVisibleAddAuth = false">取 消</el-button>
              <el-button type="primary" @click="submitAddAuthForm()">确 定</el-button>
            </div>
          </el-dialog>

        <!-- 以下是修改角色的弹出表单Dialog -->
        <el-dialog title="修改角色" :visible.sync="dialogFormVisible" width="800px" style="text-align: left">
          <div style="width: 90%;">
              <el-form :model="editForm" label-width="140px">
                  <el-form-item label="角色名">
                      <el-input v-model="editForm.roleName" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEditForm()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [],
                tableData: [],
                dialogFormVisible: false,
                dialogFormVisibleAddNew: false,
                dialogFormVisibleAddAuth: false,
                editForm: {},
                selectForm: {
                  roleName: ''
                },
                addAuthForm: {
                    roleId: 0,
                    limitId: 0
                },
                addForm:{
                  roleName: ''
                },
                total: 0,
                currentPage: 1,
                pageSizes: [5,10,15,20],
                pageSize: 10,
                isSelect: false,
                formLabelWidth: '120px'
            }
        },
        methods: {

            submitAddAuthForm(formName){
              let url = 'http://localhost:8080/roles/' + this.addAuthForm.roleId+'/addAuth';
              let formData = this.qs.stringify(this.addAuthForm);

              this.axios.post(url, formData).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.$message({
                    message: '添加权限成功！',
                    type: 'success'
                  });
                  this.addAuthForm.limitId = 0;
                  this.dialogFormVisibleAddAuth = false;
                  this.loadroleList();
                } else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              });
            },
            submitAddNewForm(formName) {
                    let url = 'http://localhost:8080/roles/add-new';

                    let formData = this.qs.stringify(this.addForm);

                    this.axios.post(url, formData).then((response) => {
                        let jsonResult = response.data;
                        if (jsonResult.state == 20000) {
                            this.$message({
                                message: '添加角色成功！',
                                type: 'success'
                            });
                            this.addForm.roleName = '';
                            this.dialogFormVisibleAddNew = false;
                            this.loadroleList();
                        } else {
                            this.$alert(jsonResult.message, '操作失败', {
                                confirmButtonText: '确定',
                                callback: action => {}
                            });
                        }
                });
            },
            showEditFormDialogAddNew() {
              this.dialogFormVisibleAddNew = true;
              this.addForm.roleName = '';
            },
            addAuthFormDialog(role){
              this.dialogFormVisibleAddAuth = true;
              this.addAuthForm.roleId = role.id;
              this.addAuthForm.limitId = '';
            },
            showEditFormDialog(role) {
                let url = 'http://localhost:8080/roles/' + role.id;

                this.axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.editForm = jsonResult.data;
                        this.dialogFormVisible = true;
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadroleList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            submitEditForm() {
                let url = 'http://localhost:8080/roles/' + this.editForm.id + '/update';

                let formData = this.qs.stringify(this.editForm);

                this.axios.post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改角色成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loadroleList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loadroleList();
                            }
                        });
                    } else if (jsonResult.state == 40900) {
                        this.$message.error(jsonResult.message);
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                            }
                        });
                    }
                });
            },
            openDeleteConfirm(role) {
                let message = '此操作将永久删除【' + role.roleName + '】角色，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(role);
                }).catch(() => {
                });
            },
            openDeleteLimitConfirm(limit) {
              let message = '此操作将永久删除【' + limit.limitName + '】权限，是否继续？';
              this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.handleDeleteLimit(limit);
              }).catch(() => {
              });
            },
          handleDeleteLimit(limit) {
            let url = 'http://localhost:8080/roles/' + limit.id + '/deleteLimit';
            console.log(limit)
            this.axios.post(url).then((response) => {
              let jsonResult = response.data;
              if (jsonResult.state == 20000) {
                this.$message({
                  message: '删除【' + limit.limitName + '】权限成功！',
                  type: 'success'
                });
                this.loadroleList();
              } else if (jsonResult.state == 40400) {
                this.$alert(jsonResult.message, '操作失败', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.loadroleList();
                  }
                });
              } else {
                this.$alert(jsonResult.message, '操作失败', {
                  confirmButtonText: '确定',
                  callback: action => {}
                });
              }
            });
          },
            handleDelete(role) {
                let url = 'http://localhost:8080/roles/' + role.id + '/delete';

                this.axios.post(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '删除【' + role.roleName + '】角色成功！',
                            type: 'success'
                        });
                        this.loadroleList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadroleList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            loadroleList() {
                let url = 'http://localhost:8080/roles?page=1&pageSize='+this.pageSize;

                this.axios.get(url).then((response) => {
                  let jsonResult = response.data;
                  if (jsonResult.state == 20000) {
                    let data = jsonResult.data;
                    this.tableData = data.list;
                    this.currentPage = data.page;
                    this.total = data.total;
                  }else {
                    this.$alert(jsonResult.message, '操作失败', {
                      confirmButtonText: '确定',
                      callback: action => {}
                    });
                  }
                });
            },
            handleSizeChange(val) {
              this.pageSize = val;
              if(this.isSelect){
                this.onSelectClick(this.currentPage,val);
              }else{
                this.pageSelect(this.currentPage,val);
              }
            },
            handleCurrentChange(val) {
              if(this.isSelect){
                this.onSelectClick(val,this.pageSize);
              }else{
                this.pageSelect(val,this.pageSize);
              }
            },
            pageSelect(page,pageSize){
              let url = 'http://localhost:8080/roles?page='+page+'&pageSize='+pageSize;
              this.axios.get(url).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onSelectClick(page,pageSize){
              this.isSelect = true;
              let url = 'http://localhost:8080/roles/selectByCondition'
              let data = this.qs.stringify(this.selectForm);
              data = data+'&page='+page+'&pageSize='+pageSize;
              this.axios.post(url,data).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onResetSelect(){
              this.selectForm.roleName='';
              this.isSelect = false;
              this.loadroleList();
            },
            selectLimit(){
              let url = 'http://localhost:8080/roles/selectAuth';

              this.axios.get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.options = jsonResult.data;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              });
            }
        },
        mounted() {
            this.loadroleList();
            this.selectLimit();
        }
    }
</script>